<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
    <!-- 引入 layui.js -->
    <script src="jquery-3.6.1.min.js"></script>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="city.js"></script>
    <style>
      #youdianchang {
        width: 40%;
      }
      .hedar {
        margin: 30px 0 30px 50px;
      }
      #ids {
        display: block;
        line-height: 39px;
      }
    </style>
  </head>
  <body>
    <div class="hedar">尊敬的用户:<span id="xp"></span>欢迎你的到来</div>
    <form class="layui-form" action="#" lay-filter="myform" id="youdianchang">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="username"
            required
            id="username"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
            disabled
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">id</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="title"
            id="ids"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
          />
          <input type="hidden" name="userid" value="">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="imgs"
            id="imgs"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
            value="https://tse2-mm.cn.bing.net/th/id/OIP-C.BzDxEEhqrMC-cN30utVXxAHaF6?pid=ImgDet&rs=1"
          />
          <img src="img/name.png" id="touxiang" style="width: 150px;margin:15px 0 15px 0"; />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
          <input 
            type="text"
            name="age"
            id="age"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-inline" style="width: 23%" lay-filter="test">
          <select id="sel1" name="sel1" lay-verify="required" lay-filter="sel1">
            <option value="">请选择省</option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
          </select>
        </div>
        <div class="layui-inline" style="width: 23%">
          <select name="sel2" lay-verify="required" id="sel2" lay-filter="sel2">
            <option value="">请选择市</option>
          </select>
        </div>
        <div class="layui-inline" style="width: 23%">
          <select  name="sel3" lay-verify="required" id="sel3" lay-filter="sel3">
            <option value="">请选择区县</option>
          </select>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男" />
            <input type="radio" name="sex" value="2" title="女" />
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">注册时间</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="zhuce"
                id="zhuce"
                required
                id="username"
                lay-verify="required"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">更新时间</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="gengxin"
                id="gengxin"
                required
                id="username"
                lay-verify="required"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo" id="btn">
            立即修改
          </button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </body>
  <script>
    var shengshi = null;
    //Demo
    layui.use("form", function () {
      var form = layui.form;
      xuanran();
      form.render();
      form.on("select(sel1)", function (data) {
        shengshi = data.value;
        sheng(data.value);
        form.render();
      });
      form.on("select(sel2)", function (data) {
        qu(data.value);
        form.render();
      });
      form.on("submit(myform)", function (data) {
        var data1 = form.val("myform");
        let datas={
          sex:data1.sex,
          age:data1.age,
          province:data1.sel1,
          city:data1.sel2,
          area:data1.sel3,
          detail_address:data1.sel1+data1.sel2+data1.sel3,
          img:data1.imgs,
        }
        $.ajax({
          url:'https://api.zzgoodqc.cn/api/user/'+data1.userid,
          type:'PUT',
          data:datas,
          headers:{
            Authorization:'Bearer '+localStorage.getItem('token'),
          },
          dataType:'json',
          success:function(res){
            if(res.code==200){
              layer.msg(res.message)
              localStorage.setItem('user',JSON.stringify(res.data))
              koko()

            }
          }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });
    });
    function qu(quindex) {
      let data = citys[shengshi].city[quindex].area;
      let html = '<option value="">请选择区域</option>';
      data.forEach((item, index) => {
        html += `<option value="${index}">${item}</option>`;
      });
      $("#sel3").html(html);
    }
    function sheng(shengindex) {
      let shengcity = citys[shengindex].city;
      var html1 = `<option value="">请选择市</option>`;
      shengcity.forEach((item, index) => {
        html1 += `<option value="${index}">${item.name}</option>`;
      });
      $("#sel2").html(html1);
    }
    $(function () {
      koko();


    });
    function xuanran() {
      var html = `<option value="">请选择省</option>`;
      $.each(citys, function (index, item) {
        html += `<option value="${index}">${item.name}</option>`;
      });
      $("#sel1").html(html);
    }
    function koko() {
      layui.use("form", function () {
        var form = layui.form;
        var data = JSON.parse(localStorage.getItem("user"));
        if (data) {
          if(data.province!=null&&data.city!=null&&data.area!=null){
            shengshi=data.province
          sheng(data.province)
          qu(data.city)
          }
      
          //给表单赋值
          form.val("myform", {
            //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            userid:data.id,
            username: data.username, // "name": "value"
            age: data.age ?? "",
            sex: data.sex,
            imgs: data.img,
            sel1:data.province,
            sel2:data.city,
            sel3:data.area,
          });
          $("#xp").html(data.username);
          $("#ids").val(data.id);
          $("#zhuce").val(data.created_at);
          $("#gengxin").val(data.updated_at);
          if(data.img!=null){
            $('#touxiang').attr('src',data.img)
          }
         
        } else {
          location.href = "登录注册.html";
        }
        form.render()
      });
    }
  </script>
</html>
